<!--子版面-->
<script setup>
import {useStore} from "vuex";
import {SubForum} from "@ginstone/nga-api/dist/src/response/field/Forum";
import ForumLink from "@/components/common/link/ForumLink.vue";
import ForumAvatar from "@/components/forum/ForumAvatar.vue";
import {onMounted, ref, toRefs} from "vue";
import {ElementUtils} from "@/assets/js/ElementUtils";

const props = defineProps({
  forumId: {type: Number, required: true},
  //子版面数据
  forum: {type: SubForum, required: true},
  //是否被屏蔽
  blocked: {type: Boolean, required: true},
})

const {blocked, forum, forumId} = toRefs(props)

const emit = defineEmits(["add", "del"])

const store = useStore();
//添加屏蔽
const add = () => store.dispatch("Forum/blockSubForumAdd", {fid: forumId.value, id: forum.value.mirrorId}).then(res => {
  ElementUtils.notice({message: res})
  emit('add', forum.value.mirrorId)
  return res
})
//取消屏蔽
const del = () => store.dispatch("Forum/blockSubForumDel", {fid: forumId.value, id: forum.value.mirrorId}).then(res => {
  ElementUtils.notice({message: res})
  emit('del', forum.value.mirrorId)
  return res
})

const isBlocked = ref(false);

//发送请求修改屏蔽状态
const beforeChange = () => {
  return isBlocked.value ? del() : add()
}

onMounted(() => {
  isBlocked.value = blocked.value
})

</script>

<template>
  <div style="display:inline-block;vertical-align: top">
    <div style="text-align: center">
      <el-switch v-model="isBlocked" :before-change="beforeChange" active-color="red" active-text="屏蔽" size="small"/>
    </div>
    <forum-link :col-tid="forum.type==='合集'?forum.id:undefined" :forum-id="forum.type==='版面'?forum.id:undefined">
      <div style="width: 90px;text-align: center;cursor: pointer;">

        <forum-avatar :url="`https://img4.nga.178.com/ngabbs/nga_classic/f/app/${forum.id}.png`"/>
        <!--        <forum-avatar :url="`https://img4.nga.178.com/proxy/cache_attach/ficon/${forum.id}${forum.type === '版面' ? 'u' : 'v'}.png`"/>-->
        <br>
        {{ forum.name }}
      </div>
    </forum-link>
  </div>
</template>

<style scoped>

</style>